<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>prop</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .kfm-border {
                border: 1px solid green ;
            }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="app">
            <h3>prop验证</h3>
            <input type="text" v-model="username">
            <!-- 使用自定义组件 -->
            <login-form :username="username" password="123" class="kfm-border"></login-form>
        </div>

        <script>
            const app = Vue.createApp( {
                data(){
                    return {
                        username: '窦之鹏'
                    }
                }
            } );

            app.component( 'LoginForm' , {
                props: {
                    username: {
                        type: String,
                        required: true
                    },
                    password: {
                        type: String,
                        required: true
                    }
                },
                inheritAttrs: false ,
                template: `<div class="row" v-bind="$attrs">
                                <span class="col-6">{{username}}</span>
                                <span class="col-6">{{password}}</span>
                           </div>`
            } );

            const vm = app.mount( '#app' );
        </script>

    </body>
</html>